<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>ECharts上手</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/chalk.js"></script>

</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="bar" style="width: 600px;height:400px;"></div>
<div id="pie" style="width: 600px;height:400px;"></div>
<div id="diy1" style="width: 600px;height:400px;"></div>
<div id="diy2" style="width: 600px;height:400px;"></div>
</body>
</html>
<script type="text/javascript">
    //基于准备好的dom,初始化echarts实例
   var myChart1 =  echarts.init(document.getElementById('bar'));

   var myChart2 =  echarts.init(document.getElementById('pie'));

   //创建图表，第二个参数即为 *.js 文件中注册的主题名字。
   var myChart3 =  echarts.init(document.getElementById('diy1'),'chalk');

   $.getJSON('js/chalk1.json', function (themeJSON) {
        echarts.registerTheme('chalk1', themeJSON)
        var myChart4 = echarts.init(document.getElementById('diy2'), 'chalk1');
        myChart4.setOption({
            series:[
                {
                    name:"访问来源",
                    type:'pie',              // 设置图表类型为饼图
                    radius:'55%',        // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[                   // 数据数组，name 为数据项名称，value 为数据项值
                        {value:234,name:'视频广告'},
                        {value:274,name:'联盟广告'},
                        {value:314,name:'邮件营销'},
                        {value:334,name:'直接访问'},
                        {value:404,name:'搜索引擎'},
                        {name:'mini',value: 29}
                    ]
                }
            ]
        });

    });
   //指定图标的配置项和数据
    var option1 = {
        title: {
            x: 'center',
            y:'bottom',
            text:'第一个echarts实例',
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor:'#bd3939',
            textStyle: {
                fontSize: 18,
                fontWeight: 'bolder',
                color: '#333'          // 主标题文字颜色
            },
            subtextStyle: {
                color: '#aaa'          // 副标题文字颜色
            }
        },
        tooltip: {},
        legend:{
            data:['销量'],
            //强制设置图形为圆
            icon:'circle',
            //设置文本为红色
            textStyle:{
                color:'red'
            }
        },
        xAxis:{
            data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {

        },
        series:[{
            name:'销量',
            type:'bar',
            data:[5,20,36,10,10,20]
        }]
    };
    //使用刚制定的配置项和数据显示图标.
    myChart1.setOption(option1);

    myChart2.setOption({
        series:[
            {
                name:"访问来源",
                type:'pie',              // 设置图表类型为饼图
                radius:'55%',        // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[                   // 数据数组，name 为数据项名称，value 为数据项值
                    {value:234,name:'视频广告'},
                    {value:274,name:'联盟广告'},
                    {value:314,name:'邮件营销'},
                    {value:334,name:'直接访问'},
                    {value:404,name:'搜索引擎'},
                    {name:'mini',value: 29}
                ],
                roseType:'angle',  // 设置参数 roseType: 'angle' 把饼图显示成『南丁格尔图』。
                itemStyle:{              //itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：
                    normal: {
                        shadowBlur:200,
                        shadowColor:'rgba(0,0,0,0.5)'
                    }
                }
            }
        ]
    });

    myChart3.setOption({
        series:[
            {
                name:"访问来源",
                type:'pie',              // 设置图表类型为饼图
                radius:'55%',        // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[                   // 数据数组，name 为数据项名称，value 为数据项值
                    {value:234,name:'视频广告'},
                    {value:274,name:'联盟广告'},
                    {value:314,name:'邮件营销'},
                    {value:334,name:'直接访问'},
                    {value:404,name:'搜索引擎'},
                    {name:'mini',value: 29}
                ]
            }
        ]
    });


</script>